<template>
    <view>
        <search></search>

    
    <!-- 2 tab栏 -->
    <u-tabs
      :list="list"
      :is-scroll="false"
      :current="current"
      @change="change"
      active-color="red"
    ></u-tabs>
    <!-- 2 tab栏 -->

        <view class="content">

          <!-- 综合内容 -->
      <view v-if="current === 0" class="comprehensive">
        <navigator
        :url="`/pages/goods_detail/goods_detail?goods_id=${item.goods_id}` "
         v-for="item in goods" :key="item.goods_id">
          <view class="image-wrap">
            <u-image
              mode="widthFix"
              :src="
                item.goods_small_logo ||
                'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fqny.smzdm.com%2F202102%2F04%2F601bc70894a6d4765.jpg_e600.jpg&refer=http%3A%2F%2Fqny.smzdm.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670316712&t=f6888e3b6fd2523f38ee5d1ab25c86c0'
              "
            ></u-image>
          </view>
          <view class="goods-wrap">
            <view class="goods-name u-line-2">{{ item.goods_name }}</view>
            <view class="goods-price">￥{{ item.goods_price }}</view>
          </view>
        </navigator>
      </view>
      <!-- 销量内容 -->
      <view v-if="current === 1" class="comprehensive">
         <navigator
        :url="`/pages/goods_detail/goods_detail?goods_id=${item.goods_id}` "
         v-for="item in goods" :key="item.goods_id">
          <view class="image-wrap">
            <u-image
              mode="widthFix"
              :src="
                item.goods_small_logo ||
                'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fqny.smzdm.com%2F202102%2F04%2F601bc70894a6d4765.jpg_e600.jpg&refer=http%3A%2F%2Fqny.smzdm.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670316712&t=f6888e3b6fd2523f38ee5d1ab25c86c0'
              "
            ></u-image>
          </view>
          <view class="goods-wrap">
            <view class="goods-name u-line-2">{{ item.goods_name }}</view>
            <view class="goods-price">￥{{ item.goods_price }}</view>
          </view>
        </navigator>
      </view>
      <!-- 价格内容 -->
      <view v-if="current === 2" class="comprehensive">
          <navigator
        :url="`/pages/goods_detail/goods_detail?goods_id=${item.goods_id}` "
         v-for="item in goods" :key="item.goods_id">
          <view class="image-wrap">
            <u-image
              mode="widthFix"
              :src="
                item.goods_small_logo ||
                'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fqny.smzdm.com%2F202102%2F04%2F601bc70894a6d4765.jpg_e600.jpg&refer=http%3A%2F%2Fqny.smzdm.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670316712&t=f6888e3b6fd2523f38ee5d1ab25c86c0'
              "
            ></u-image>
          </view>
          <view class="goods-wrap">
            <view class="goods-name u-line-2">{{ item.goods_name }}</view>
            <view class="goods-price">￥{{ item.goods_price }}</view>
          </view>
        </navigator>
      </view>
    </view>
    </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          name: "综合",
        },
        {
          name: "销量",
        },
        {
          name: "价格",
        },
      ],
      current: 0,
      
      // 商品数组
      goods: [],
    };
  },
    // 在onLoad 生命周期中 可以通过 形参来获取到 url携带的数据
  onLoad(options) {
    // options={cid,,}
    //  定义全局变量  接口要用的参数
    this.queryParams = {
      // 	关键字
      query: "",
      // 	分类id
       cid: "",
      // 	页码
      pagenum: 1,
      // 	页容量
      pagesize: 10,
       ...options,
      
    };

console.log( this.queryParams );
    // 发送请求获取数据
    this.getGoodsSearch();

      //  console.log(this.total,'总条数');   bug
  
  },

  
  methods: {
    change(index) {
      this.current = index;
      this.Sort(this.goods)

       

    },
        // 根据参数获取数据
    async getGoodsSearch() {
      const result = await this.$u.get("/goods/search", this.queryParams);
      // console.log(result,'搜索之后的数据');
      // console.log(result.message,'下拉');
      const oldGoods= this.goods
      
     this.Sort(result.message.goods);// bug 
    //  console.log(result.message.goods,'排序后');
      // 新 旧数据的 合并
      
      this.goods = [...oldGoods, ...this.goods];
      // 获取总条数
      this.total = result.message.total;

         console.log(this.total,'总条数');     
       
    },
      // 滚动条触底事件
  onReachBottom() {
    
    // 判断有没有下一页数据
    if (this.goods.length < this.total) {
      // 还有下一页数据
      // 页码 ++
      this.queryParams.pagenum++;
     
      // 重新发送请求 获取最新的数据
      this.getGoodsSearch();
    } else {
      // 没有下一页数据
      console.log("没有下一页数据");
    }
  },
  Sort(arr){  //排序显示
     if (this.current===0) {
          this.goods=arr.sort(function(a,b){
          return a.goods_id > b. goods_id? 1:-1
        });
        
          //  console.log(this.goods,'综合');
          
        }
   
      if (this.current===1) {
        this.goods=arr.sort(function(a,b){
          return a.goods_id < b. goods_id?1:-1
        });
        //  console.log(this.goods,'销量');
         }

          if (this.current===2) {
        this.goods=arr.sort(function(a,b){
          return a.goods_price > b. goods_price?1:-1
        });
        //  console.log(this.goods,'价格');
         }
         
  }
  },

};
</script>

<style lang="scss">
// 综合
.comprehensive {
  navigator {
    border-top: 1rpx solid #eee;
    display: flex;
    .image-wrap {
      flex: 1;
      padding: 10rpx;
    }
    .goods-wrap {
      flex: 3;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .goods-name {
      }
      .goods-price {
        color: #eb4450;
      }
    }
  }
}
</style>